import React, { Component } from 'react';

class Child2 extends Component {
    render() {
        return (
            <div
            style={{
                width:'685px',
                marginLeft:'210px'
            }}>
                <div>
                    {
                    this.props.arr.map((item,index) => (
                    <ul
                    style={{
                        listStyle:'none',
                        textAlign: 'center',
                    }}
                    key={index}
                    >
                        <li
                        style={{
                            width:'30%',
                            float:'left'
                        }}
                        >
                            <div
                            style={{
                                width:'100%',
                                height:'50px',
                                background:'rgb(216, 241, 169)',
                                border:'3px solid black'
                            }}
                            ><h3>账号</h3></div>
                            <div
                            style={{
                                width:'100%',
                                height:'335px',
                                borderTop:'none',
                                border:'3px solid black'
                            }}
                            >
                            <h3>
                                {item.username}
                            </h3>
                            </div>
                        </li>
                        <li
                        style={{
                            width:'30%',
                            float:'left'
                        }}
                        >
                            <div
                            style={{
                                width:'100%',
                                height:'50px',
                                background:'rgb(216, 241, 169)',
                                border:'3px solid black'
                            }}
                            ><h3>密码</h3></div>
                            <div
                            style={{
                                width:'100%',
                                height:'335px',
                                borderTop:'none',
                                border:'3px solid black'
                            }}
                            >
                                <h3>
                                {item.password}
                                </h3>
                                </div>
                        </li>
                        <li
                        style={{
                            width:'30%',
                            float:'left'
                        }}
                        >
                            <div
                            style={{
                                width:'100%',
                                height:'50px',
                                background:'rgb(216, 241, 169)',
                                border:'3px solid black'
                            }}
                            ><h3>年龄</h3></div>
                            <div
                            style={{
                                width:'100%',
                                height:'335px',
                                borderTop:'none',
                                border:'3px solid black'
                            }}
                            >
                                <h3> {item.age}</h3></div>
                        </li>
                    </ul>
                    ))}
                </div>
            </div>
        );
    }
}

export default Child2;
